@import "../../common/tool.less";

.index_main {
  // padding-bottom: 104*@vw;
  .main-section {
    // width: 25%;
    margin: 2em auto 0;
    text-align: center;
    .login-section {
      background: #fff;
      h2 {
        padding: .6em 0;
        background: #f99104;
        font-size: 1.5em;
        color: #fff;
        font-family: 'Josefin Sans', sans-serif;
      }
      .login-top {
        padding: 1em 0;
        border-bottom: 1px solid #f99104;
        p {
          font-size: .85em;
          color: #1d1d1b;
          padding-bottom: .5em;
        }
        ul li {
            padding: .8em 0;
            a {
              text-decoration:none;
              font-size: 0.9em;
              font-weight: 400;
              color: #fff;
            }
            a.facebook {
              background:#3b5998;
              padding: 0.8em 1.7em 0.9em 1em;
            }
            a.facebook:hover {
              background: #244384;
            }
            a.google {
              background:#00aeed;
              padding: 0.8em 2.8em 0.9em 1em;
            }
            a.google:hover {
              background:#26A6D5;
            }
            a span.facebook {
              // background: url(../../../static/img/icon-facebook.png) no-repeat 0px 0px;
              background: url(../../../static/img/facebook_colour.svg) no-repeat 0px 0px;
              width:32px;
              height:32px;
              display:inline-block;
              vertical-align: middle;
              margin: 0em 1.5em 0em 0em;
            }
            a span.google {
              // background: url(../../../static/img/icon-google.png)no-repeat 0px 0px;
              background: url(../../../static/img/google_colour.svg)no-repeat 0px 0px;
              width:32px;
              height:32px;
              display:inline-block;
              vertical-align: middle;
              margin: 0em 1.5em 0em 0em;
            }
          }
      }
    }
  }
}
.login-middle input[type="text"] {
  width: 50%;
  padding: .8em 1em;
  outline: none;
  margin: 1em 0;
  border-radius: 4px;
  border: 1px solid#f99104;
  outline: none;
  background-color: #f99104;
}
.login-middle input[type="password"] {
  width: 50%;
  padding: .8em 1em;
  outline: none;
  border-radius: 4px;
  border: 1px solid#f99104;
  outline: none;
  background-color: #f99104;
}
.login-middle {
  padding: 1em 0;
}
.login-middle p {
  font-size: .85em;
  color: #1d1d1b;
  padding-bottom: .5em;
}
.login-bottom {
  padding: 2em 1em;
}
.login-left {
  float: left;
}
.login-right {
  float: right;
}
.login-bottom {
  padding: 1em 2em 4em;
  border-top: 1px solid #f99104;
}
.login-left p {
  font-size: .8em;
  color: #1d1d1b;
  line-height: 1.8em;
}
.login-left a {
  font-size: 1em;
  color: #f99104;
}
.login-right input[type="submit"] {
  padding: .5em 1em;
  background: #f99104;
  outline: none;
  border: none;
  font-size: 1em;
  display: block;
  margin-top: .5em;
  cursor: pointer;
  color:#fff;
  transition: 0.5s all;
  -webkit-transition: 0.5s all;
  -o-transition: 0.5s all;
  -moz-transition: 0.5s all;
  -ms-transition: 0.5s all;
}
.login-right input[type="submit"]:hover {
  background: #00B7C9;
}
::-web-input-placeholder{
  font-size:.95em;
}
.footer {
  text-align: center;
  padding:2.4em 0;
}
.footer p {
  font-size: .9em;
  color: #fff;
  margin: 0px;
}
.footer p a {
  color: #fff;
}
.footer p a:hover {
  color: #f99104;
}
/**responsive*/
@media (max-width:1440px){
}
@media (max-width:1366px){
  .login-middle input[type="text"] {
    width: 53%;
  }
  .login-middle input[type="password"] {
    width: 53%;
  }
}
@media (max-width: 1280px){
  .login-middle input[type="text"] {
    width: 57%;
  }
  .login-middle input[type="password"] {
    width: 57%;
  }
}
@media (max-width: 1080px){
  .main-section {
    width: 35%;
  }
}
@media (max-width: 991px){
  .header h1 {
    font-size: 3em;
  }
}
@media (max-width: 800px){
  .main-section {
    width: 40%;
  }
}
@media (max-width: 768px){
  .main-section {
    width: 45%;
  }
}
@media (max-width: 648px){
  .header {
    margin-top: 3em;
  }
  .main-section {
    width: 51%;
  }
}
@media (max-width: 480px){
  .header h1 {
    font-size: 2.8em;
  }
  .main-section {
    width: 65%;
  }
  .login-section h2 {
    font-size: 1.3em;
  }
}
@media (max-width: 414px){
  .main-section {
    width: 78%;
  }
}
@media (max-width: 375px){
  .main-section {
    width: 85%;
  }
}
@media (max-width: 320px){
  .main-section {
    width: 90%;
  }
  .header h1 {
    font-size: 2.7em;
  }
  .header {
    margin-top: 2em;
  }
  .login-middle input[type="text"] {
    width: 70%;
  }
  .login-middle input[type="password"] {
    width: 70%;
  }
  .login-bottom {
    padding: 1em 1em 4em;
  }
  .footer {
      padding: 2em 0;
  }
  .footer p {
      font-size: .85em;
  }
}